<template>
    <div class="left-panel">
        <div class="left-button">
            <div class="btn" :class="{active:mode==='outline'}" @click="toggleBlocks('outline')">
                <Lightning />
            </div>
            <div class="btn" :class="{active:mode==='blocks'}" @click="toggleBlocks('blocks')">
                <Share />
            </div>
        </div>
        <transition name="leftPanel-animate">
            <div class="left-content" v-show="mode">
            {{ mode }}
            <SmoothDndContainer
            class="blocks-group"
            group-name="blocks" behaviour="copy" tag="div"
            @drag-start="(e,v)=>console.log(e,v)"
            @drag-leave="(e,v)=>console.log(e,v)"
            @drop="(e)=>console.log(e)"
            :get-child-payload="(index:number)=>index+1"
            >
            <SmoothDndDraggable v-for="item in 10" :key="item">
              <div class="block-item">{{item}}</div>
            </SmoothDndDraggable>
          </SmoothDndContainer>
            </div>
        </transition>
    </div>
</template>
<script setup lang="ts">
import {Lightning,Share} from '@icon-park/vue-next';
import { ref } from 'vue';

import {SmoothDndContainer} from '@/components/SmoothDnd/SmoothDndContainer.ts';
import {SmoothDndDraggable} from '@/components/SmoothDnd/SmoothDndDraggable.ts';
type Mode="outline"|"blocks"|null;

const mode=ref<Mode>(null);

const toggleBlocks=(newBlocks:Mode)=>{
    if(newBlocks===mode.value){
        mode.value=null;
    }else{
        mode.value=newBlocks;
    }
}
</script>
<style scoped>
.left-panel{
    display:flex;
    height: 100%;
    background-color: #f5f5f5;
    box-shadow: var(--color-gray-300) 1px 0 0;
}
.left-button{
    width: 50px;
    height: 100%;
    background-color: #e2e2e2;
    padding: 20px;
    display: flex;
    flex-direction:column;
    align-items: center;
    gap: 20px;
}
.btn{
    border-radius: 5px;
    padding: 5px 10px;
}
.btn:hover{
    background-color: #f2f2f2;
}
.btn.active{
    background-color: rgb(0, 173, 75);
    color: var(--color-white);
}
.left-content{
    width: 200px;
    height: 100%;
}
.leftPanel-animate-enter-from,
.leftPanel-animate-leave-to{
    width: 0px;
}
.leftPanel-animate-enter-active,
.leftPanel-animate-leave-active{
    transition: width 0.1s cubic-bezier(0.3,0.1,0.3,1);
}
.block-item{
    width: 40px;
    height: 40px;
    background-color: #fff;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e8e8e8;
    font-size: 14px;
    transition:background-color 0.3s;
    cursor: move;
    user-select: none;
    /* margin-right: 8px;; */
}
.blocks-group{
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;
}
</style>
